<template>
	<!-- 随堂测 某个学生 答题详情 -->
	<view class="page">
		<view class="flex benben-position-layout flex flex-wrap align-center flex_0_ibhf"
			:style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx', }">
			<view class='flex flex-wrap align-center justify-between flex-sub fd0_0_ibhf'>
				<view class='flex flex-wrap align-center fd0_0_c0_ibhf' @tap.stop="handleJumpDiy" data-type="back"
					data-url="1">
					<text class='fu-iconfont2  fd0_0_c0_c0_ibhf'>&#xE794;</text>
				</view>
				<view class='flex flex-wrap align-stretch justify-center'>
					<text class='fd0_0_c1_c0_ibhf'>{{name}}</text>
				</view>
				<view class='flex flex-wrap align-center justify-end fd0_0_c0_ibhf'>
				</view>
			</view>

		</view>
		<view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
		<view class="hp"></view>
		<view class="top">
			<view class="answer-content">
				<view class="">
					<!-- <view class="type"> 5/4</view> -->
					<view class="content">
						<view class="content-ite" @tap.stop="check(index)"
							:class="index==active ? 'content-ite-other' : '' " v-for="(item,index) in list">
							{{index + 1}}
						</view>
					</view>
				</view>

			</view>
		</view>
		<view class="overview">
			<view class="subject">
				<view class="type">
					<view class="name">
						<view class="line">
						</view>
						{{examObj.question_type_name}}
					</view>
					<view class="number">
						{{active + 1}}/{{list.length}}
					</view>
				</view>
				<view class="title" v-html="examObj.question_title">
				</view>

				<!-- 选择 -->
				<view class="changeBox" v-if="examObj.type==1 ||examObj.type==2 ">
					<view class="change-item " :class="getClessName(index)"
						v-for="(item,index) in examObj.question_options" :key="item.label">
						<text class="index">
							{{item.label}}
						</text>
						<view class="content" v-html="item.value">
						</view>
					</view>

				</view>
				<view class="changeBox" v-if="examObj.type==3 ">
					<view class="change-item " :class="getClessNamepd(index)"
						v-for="(item,index) in examObj.question_options" :key="item.label">
						<text class="index">
							{{item.label}}
						</text>
						<view class="content" v-html="item.value">
						</view>
					</view>

				</view>

				<!-- 简答 -->
				<view v-if="examObj.type==4" class="short-answer">
					<view class="answer" v-html="examObj.answer">
					</view>
				</view>
				
			</view>
			<view class="hp"></view>
			<!-- 答案解析 -->
			<view class="analysis">
				<div class="analysistitle">
					<image style="width: 32rpx;height: 32rpx;margin-right: 16rpx;" src="@/static/images/img01.png"
						mode="">
					</image>
					答案解析
					<image style="width: 32rpx;height: 32rpx;margin-left: 16rpx;" src="@/static/images/img01.png"
						mode="">
					</image>
				</div>
				<!--1正确 2错误  3未答  -->
				<view v-if="examObj.is_answer == 1" class="dui">
					<image style="width: 32rpx;height: 32rpx;margin-right: 16rpx;" src="/static/exam/dui.png" mode="">
						回答正确
				</view>
				<view v-else="examObj.is_answer == 2" class="dui">
					<image style="width: 32rpx;height: 32rpx;margin-right: 16rpx;" src="/static/img02/cuo.png" mode="">
						回答错误
				</view>

				<!-- 选择 -->
				<view class="flex bottom" v-if="examObj.type==1|| examObj.type==2|| examObj.type==3">
					正确答案：<span
						style="margin-right: 88rpx; color: #2860F4 ;">{{getIte(examObj.type,examObj.question_value)}}</span>
					学生答案：<span style="color: #2860F4 ">{{ getIte(examObj.type,examObj.answer)}}</span>
				</view>
				<view class="flex bottom" v-if="examObj.type==4 || examObj.type==5">
					正确答案：<span style="margin-right: 88rpx; color: #2860F4 ;" v-if="examObj.type==5"
						v-html="examObj.daan"></span>
					<span style="margin-right: 88rpx; color: #2860F4 ;" v-if="examObj.type==4"
						v-html="examObj.question_value"></span>
					学生答案：<span style="color: #2860F4 " v-html="examObj.answer?examObj.answer:'未答'"></span>
				</view>
			</view>
		</view>
		<view class="flex benben-position-layout flex flex-wrap align-center coursePro_flex_3"
			:style=" {height:(150+bottomSafeAreaRpx)+'rpx',paddingBottom:bottomSafeAreaRpx+'rpx', }">
			<view class="dtk" v-if="examObj.is_answer==3 && !isgraded" @tap.stop="open(examObj.score)">
				<image style="width: 40rpx;height: 40rpx;" src="/static/images/pf.png" mode=""></image>
				<view class="">评分</view>
			</view>
			<view class="pf huipf" @tap.stop="open(examObj.score)" v-if="!isgraded && examObj.is_answer!=3 ">
				{{examObj.score + '分'}}</view>

			<view class="pf huipf" @tap.stop="open(examObj.score)" v-if="isgraded">
				{{examObj.score + '分'}}
			</view>
			<view class="pf tj" v-if="(active == list.length - 1 )&& !isgraded" @tap.stop="tjpy" >
				提交
			</view>

		</view>
		<benben-popup v-model="popupShow1758159673073" :mask="true" :mask-close-able="true" mode='center'
			:z-index='9999' background-color='rgba(0, 0, 0, 0.5)'>
			<!---flex布局2flex布局开始-->
			<view class="flex flex-wrap align-center justify-center benben-flex-layout people_flex_3_ibhf">
				<view class='flex flex-direction align-center people_fd3_0_ibhf'>
					<view class='flex flex-direction align-center justify-center people_fd3_0_c0_ibhf'>
						<text class='people_fd3_0_c0_c0_ibhf'>评分</text>
					</view>
					<view class='flex flex-wrap align-center people_fd3_0_c1_ibhf'>
						<benben-input class='flex-sub people_fd3_0_c1_c0_ibhf' type="number" :placeholder="inputname"
							confirm-type="done" :maxlength="-1" :adjust-position='true' v-model="inputone"
							placeholder-style="color:rgba(153, 153, 153, 1);font-size:28rpx" />
						<text>分</text>
					</view>

					<view class='flex flex-wrap align-center people_fd3_0_c3_ibhf'>
						<view class='flex flex-wrap align-center justify-center people_fd3_0_c3_c0_ibhf'
							@tap.stop="popupShow1758159673073 = false">
							<text>取消</text>
						</view>
						<view class='flex flex-wrap align-center justify-center people_fd3_0_c3_c1_ibhf'
							@tap.stop="editfen">
							<text>确认</text>
						</view>
					</view>
				</view>
			</view>
		</benben-popup>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				active: 0,
				examObj: {},
				name: '',
				uid: '', //学生名字 id
				aid:'',//评语需要的aid
				homeworkreleaserecord_id: '', //随堂测查看某学生答题情况需要
				homework_id: '', //随堂测查看某学生答题情况需要
				popupShow1758159673073: false,
				inputname: '输入1-100',
				inputone: '',
				isgraded: false, //是否批改
			}
		},
		onLoad(option) {
			this.name = option.name
			this.aid = option.aid
			this.user_id=option.uid
			this.homeworkreleaserecord_id = option.homeworkreleaserecord_id ? option.homeworkreleaserecord_id : ''
			this.homework_id = option.homework_id ? option.homework_id : ''
			this.getinfo()
		},
		methods: {
			async getinfo() {
				let res = await this.$api.post(global.apiUrls.post68d11e22dbc57, {
					user_id: this.user_id,
					homeworkreleaserecord_id: this.homeworkreleaserecord_id,
					homework_id: this.homework_id,
				});
				console.log(res.data.data)
				if (res.data.code != 1) {
					this.$message.info(res.data.msg)
					uni.navigateBack()
					return
				}
				this.list = res.data.data.map(item => {
					item.type = item.question_type == 'radio' ? 1 : item.question_type == 'selected' ? 2 : item
						.question_type == 'torf' ? 3 : item.question_type == 'cloze' ? 5 : item
						.question_type == 'open' ? 6 : 4
					if (item.type == 5) {
						item.daan = JSON.parse(item.question_value)[0];
					}
					// console.log(item.type)
					item.answer = JSON.parse(item.answer)
					item.question_value = JSON.parse(item.question_value)

					if (item.type == 5) {
						item.answer = item.answer[0]
					}
					return item
				})
				this.getstclist(0)
			},
			getstclist(index) {
				console.log(this.list)
				this.examObj = this.list[index]
				this.active = index
			},
			check(index) {
				this.active = index
				this.examObj = this.list[index]
			},
			// 单多选判断
			getIte(type, input) {
				const map = ['A', 'B', 'C', 'D', 'E']
				let arr = []
				if (!input) {
					return '未答'
				} else {
					if (typeof input === 'string') {
						console.log('string')
						let str = input.trim()
						console.log(str)
						// 替换掉中文符号
						str = str
							.replace(/，/g, ',')
							.replace(/[“”]/g, '"')
							.replace(/'/g, '"')

						try {
							// 多尝试几层解析
							let parsed = str
							while (typeof parsed === 'string' && parsed.includes('[')) {
								parsed = JSON.parse(parsed)
							}

							if (Array.isArray(parsed)) {
								arr = parsed.map(i => Number(i))
							} else if (!isNaN(parsed)) {
								arr = [Number(parsed)]
							}
						} catch (e) {

							if (str.includes(',')) {
								arr = str.split(',').map(i => Number(i.trim()))
							} else if (!isNaN(str)) {
								arr = [Number(str)]
							}
						}
					} else if (Array.isArray(input)) {
						console.log('arr')
						arr = input.map(i => Number(i))
					} else if (typeof input === 'number') {
						console.log('number')
						arr = [input]
					}

					return arr.map(i => map[i] ?? '').join('')
				}

			},
			// 单多选 选中 未选中颜色
			getClessName(index) {
				console.log(this.examObj.answer)
				if (!this.examObj.answer) {
					return ''
				} else {
					// 正确答案显示蓝色
					if (this.examObj.question_value.includes(index)) {
						return 'change-item-active'
					}

					if (this.examObj.is_answer == 2 && this.examObj.answer.includes(index)) {
						return 'change-item-cuo'
					}
				}

			},
			// 判断的 选中 未选中颜色
			getClessNamepd(index) {
				console.log(this.examObj.answer)
				// 没有答案
				if (!this.examObj.answer) {
					return ''
				} else {
					// 有答案
					if (this.examObj.is_answer == 1 && this.examObj.answer == index) {
						return 'change-item-active'
					}
					if (this.examObj.is_answer == 2 && this.examObj.answer == index) {
						return 'change-item-cuo'
					}
				}

			},
			// 打开评分弹框
			open(fen) {
				console.log(this.isgraded)
				if (this.isgraded) {
					console.log(11)
					return
				}
				if (fen) {
					this.inputone = fen
				} else {
					this.inputone = ''
				}
				console.log(fen)
				console.log(fen)
				this.popupShow1758159673073 = true 
				console.log(this.popupShow1758159673073 )
			},
			// 打分 修改分数
			async editfen() {
				if (!this.inputone) {
					this.$message.info('请输入分数')
					return
				}
				let url = global.apiUrls.post68f090830e25b
				// if(this.type==3){
				// 	url=global.apiUrls.post68e77bea9e159
				// }
				let res = await this.$api.post(url, {
					aid: this.examObj.aid,
					score: this.inputone,
				});
				this.examObj.score = this.inputone
				this.list[this.active].score = this.inputone

				if (res.data.code != 1) {
					this.$message.info(res.data.msg);
					return
				}
				this.popupShow1758159673073 = false
				this.$message.info('打分成功')

			},
			// 提交评语
			async tjpy(){
				let iswpg=false
				this.list.map(item=>{
					if(item.is_answer==3){
						iswpg=true
					}
				})
				if(iswpg){
					this.$message.info('您还有未批阅的题')
					return
				}
				
				let res = await this.$api.post(global.apiUrls.post68f0912839b78, {
					
					aid:this.aid,
					comment:'随堂测评分',
				});
				if (res.data.code != 1) {
					this.$message.info(res.data.msg);
					return
				}
				uni.$emit('tjstcs',1)
				uni.navigateBack()
			},

		}
	}
</script>

<style lang="scss" scoped>
	.page {
		width: 100vw;
		overflow-x: hidden;
		min-height: calc(100vh - var(--window-bottom));
		background: #ffffff;
		background-size: 100% auto;

		.hp {
			width: 100%;
			height: 24rpx;
			background-color: #F3F4F8;
		}

		.flex_0_ibhf {
			width: 750rpx;
			height: 88rpx;
			overflow: hidden;
			z-index: 10;
			top: 0rpx;
			background: #fff;
			background-size: 100% auto !important;

			.fd0_0_ibhf {
				padding: 0rpx 32rpx 0rpx 32rpx;

				.fd0_0_c1_c0_ibhf {
					font-size: 36rpx;
					font-weight: 700;
					color: #333333;
					line-height: 50rpx;
				}
			}

			.fd0_0_c0_ibhf {
				width: 120rpx;

				.fd0_0_c0_c0_ibhf {
					font-size: 36rpx;
					color: #333;
				}
			}
		}

		.top {
			.answer-content {
				padding-top: 24rpx;
				// height: 790rpx;
				// background-color: #145EFD;
				overflow-y: auto;
				border-bottom: 1rpx solid #f5f5f5;

				.type {
					font-weight: 400;
					font-size: 28rpx;
					color: #000000;
					line-height: 40rpx;
					margin-top: 32rpx;
				}

				.content {
					// margin-top: 36rpx;
					display: flex;
					flex-wrap: wrap;

					.content-ite {
						width: 64rpx;
						height: 64rpx;
						background: #ffffff;
						border: 1px solid #145EFD;
						color: #145EFD;
						border-radius: 64rpx;
						line-height: 64rpx;
						text-align: center;
						font-weight: 400;
						font-size: 32rpx;
						// color: #333333;
						margin: 0 28rpx 36rpx;
					}

					.content-ite-other {
						background: #145EFD;
						// border: 1rpx solid #145EFD;
						color: #ffffff;
					}
				}
			}
		}

		.overview {
			min-height: 500rpx;
			width: 100%;

			.analysis {
				width: 750rpx;
				min-height: 740rpx;
				background: #FFFFFF;
				border-radius: 0rpx 0rpx 0rpx 0rpx;
				margin-top: 24rpx;
				padding: 1rpx 24rpx 30rpx;

				.analysistitle {
					height: 50rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					// margin-top: 32rpx;
				}

				.dui {
					font-weight: 500;
					font-size: 28rpx;
					color: #333333;
					height: 40rpx;
					display: flex;
					align-items: center;
				}

				.daan {
					min-height: 88rpx;
					background: #F8F8FA;
					border-radius: 16rpx 16rpx 16rpx 16rpx;
					margin-top: 32rpx;
					padding: 24rpx;
					font-weight: 500;
					font-size: 28rpx;
					color: rgba(51, 51, 51, 1);
				}

				.zhishidian-title {
					font-weight: 500;
					font-size: 28rpx;
					color: #333333;
					line-height: 40rpx;
					margin-top: 32rpx;
				}

				.zhishidian-content {
					font-weight: 400;
					font-size: 28rpx;
					color: #707070;
					line-height: 40rpx;
					margin-top: 24rpx;
				}

			}

			.subject {
				padding: 32rpx 24rpx 32rpx;
				background: #FFFFFF;
				border-radius: 0rpx 0rpx 0rpx 0rpx;

				// 选项
				.changeBox {
					.change-item {
						margin-top: 36rpx;
						padding: 19rpx 23rpx;
						background: #F8F8FA;
						border-radius: 16rpx 16rpx 16rpx 16rpx;
						display: flex;
						align-items: center;
						border: 1rpx solid rgba(20, 94, 253, 0);

						.index {
							width: 48rpx;
							height: 48rpx;
							// background: #EBEEF2;
							// border-radius: 48rpx;
							font-size: 28rpx;
							color: #333;
							line-height: 48rpx;
							text-align: center;
							flex-shrink: 0;
							margin-right: 20rpx
						}
					}

					.change-item-active {
						background: #EEF6FE;
						border: 1rpx solid #145EFD;

						.index {
							// background: #145EFD;
							// color: #FFFFFF;
						}
					}

					.change-item-cuo {
						background: rgba(253, 118, 46, 0.1);
						border: 1rpx solid #FD762E;

						.index {
							// background: #FD762E;
							// color: #FFFFFF;
						}
					}
				}

				.title {
					font-weight: 400;
					font-size: 32rpx;
					color: #333333;
					line-height: 50rpx;
					margin-top: 44rpx;
					display: flex;
				}

				.type {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.name {
						display: flex;
						align-items: center;
						font-weight: 500;
						font-size: 32rpx;
						color: #333333;

						.line {
							width: 5rpx;
							height: 32rpx;
							background: #145EFD;
							border-radius: 4rpx 4rpx 4rpx 4rpx;
							margin-right: 12rpx;
						}
					}

					.number {
						font-size: 26rpx;
						color: rgba(153, 153, 153, 1);

						span {
							font-size: 32rpx;
							color: rgba(51, 51, 51, 1);
						}
					}
				}

			}

			.bottom {
				margin-top: 32rpx;
				padding: 0 24rpx;
				align-items: center;
				width: 702rpx;
				height: 88rpx;
				background: #F8F8FA;
				border-radius: 16rpx;
			}
		}

		// 简答
		.short-answer {
			margin-top: 24rpx;
			min-height: 200rpx;
			background: #F8F8FA;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			border: 1rpx solid #EEEEEE;


			.kong {
				font-weight: 400;
				font-size: 28rpx;
				color: #999999;
				line-height: 40rpx;
				margin: 36rpx 0 0 24rpx;
			}

			.answer {
				font-weight: 400;
				font-size: 28rpx;
				color: #333333;
				line-height: 48rpx;
				margin: 36rpx 24rpx;
			}
		}
	}

	.people_flex_3_ibhf {
		width: 622rpx;
		// margin: 0rpx 0rpx 0rpx 64rpx;

		.people_fd3_0_ibhf {
			background: #FFFFFF;
			width: 622rpx;
			height: 530rpx;
			border-radius: 16rpx;

			.people_fd3_0_c0_ibhf {
				margin: 48rpx 0rpx 48rpx 0rpx;

				.people_fd3_0_c0_c0_ibhf {
					font-size: 36rpx;
					color: #333;
					font-weight: 600;
				}
			}

			.people_fd3_0_c3_ibhf {
				color: var(--benbenFontColor3);
				font-size: 32rpx;
				margin-top: 100rpx;

				.people_fd3_0_c3_c0_ibhf {
					background: #F4F8FD;
					width: 240rpx;
					height: 88rpx;
					margin: 0rpx 44rpx 0rpx 0rpx;
					border-radius: 44rpx;
					color: rgba(20, 94, 253, 1);
					font-size: 32rpx;
				}

				.people_fd3_0_c3_c1_ibhf {
					background: #145EFD;
					width: 240rpx;
					height: 88rpx;
					border-radius: 44rpx;
					color: #fff;
				}
			}

			.people_fd3_0_c1_ibhf {
				border: 1px solid #F2F4F7;
				background: #F6F7FA;
				width: 526rpx;
				height: 84rpx;
				margin: 0rpx 0rpx 24rpx 0rpx;
				border-radius: 12rpx;
				padding: 0 24rpx;
			}
		}
	}

	.coursePro_flex_3 {
		width: 750rpx;
		overflow: hidden;
		z-index: 10;
		bottom: calc(0rpx + var(--window-bottom));
		background-color: #fff;
		box-shadow: 0rpx -1rpx 0rpx 1rpx #EEEEEE;
		justify-content: center;

		.coursePro_fd3_0 {
			font-weight: 400;
			font-size: 28rpx;
			color: #145EFD;
			border-radius: 44rpx;
			margin: 0 auto;
			display: flex;
			flex-direction: column;
			align-items: center;

		}

		.top {
			width: 157rpx;
			height: 84rpx;
			background: #FFFFFF;
			border-radius: 42rpx 42rpx 42rpx 42rpx;
			border: 1rpx solid #145EFD;
			line-height: 84rpx;
			text-align: center;
			font-weight: 500;
			font-size: 32rpx;
			color: #145EFD;
			margin-left: 24rpx;
		}

		.dtk {
			margin-right: 24rpx;
			margin-left: auto;
			color: #145EFD;
			font-size: 28rpx;
			text-align: center;
		}



		.pf {
			margin-left: auto;
			width: 157rpx;
			height: 84rpx;
			background: linear-gradient(270deg, #145EFD 0%, #6E9CFF 100%);
			border-radius: 42rpx 42rpx 42rpx 42rpx;
			line-height: 84rpx;
			text-align: center;
			font-weight: 500;
			font-size: 32rpx;
			color: #fff;
			margin-right: 24rpx;
		}

		.huipf {
			// background-color: #EEEEEE;
			background: linear-gradient(270deg, #EEEEEE 0%, #EEEEEE 100%);
			color: #666666;
		}

		.tj {
			margin-left: 24rpx;
		}
	}
</style>
